<template>
  <div class="user">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="查询信息：">
        <el-input v-model="state" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="征地批注起止时间：">
        <div class="block">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="" class="el-icon-search" @click="onSubmit()"
          >查询</el-button
        >
        <el-button class="el-icon-download" @click="exportClick()"
          >导出为文档</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 支出申请表格 -->
    <div v-show="this.expapply">
      <el-table
       :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"  
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 2231px"
      >
        <el-table-column prop="name" fixed="left" label="状态" width="60">
        </el-table-column>
        <el-table-column prop="address" fixed="left" label="姓名" width="100px">
        </el-table-column>
        <el-table-column prop="name" label="性别" width="60"> </el-table-column>
        <el-table-column prop="name" label="出生日期" width="100">
        </el-table-column>
        <el-table-column prop="name" label="身份证号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="社保卡号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="开户行名称" width="100">
        </el-table-column>
        <el-table-column prop="name" label="银行账号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="户主" width="100">
        </el-table-column>
        <el-table-column prop="name" label="与户主关系" width="80">
        </el-table-column>
        <el-table-column prop="name" label="家庭住址" width="120">
        </el-table-column>
        <el-table-column prop="name" label="联系电话" width="90">
        </el-table-column>
        <el-table-column prop="name" label="征地前土地面积（亩）" width="100">
        </el-table-column>
        <el-table-column prop="name" label="原有社保类型" width="90">
        </el-table-column>
        <el-table-column prop="name" label="社保缴费状态" width="90">
        </el-table-column>
        <el-table-column prop="name" label="享受困难补贴年限" width="80">
        </el-table-column>
        <el-table-column prop="name" label="企业缴费年限" width="100">
        </el-table-column>
        <el-table-column prop="name" label="征地项目" width="100">
        </el-table-column>
        <el-table-column prop="name" label="被征地时年龄（周岁）" width="100">
        </el-table-column>
        <el-table-column prop="name" label="基准补贴年限" width="100">
        </el-table-column>
        <el-table-column prop="name" label="补贴金额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="参保类型" width="80">
        </el-table-column>
        <el-table-column prop="name" label="创建时间" width="100">
        </el-table-column>
        <el-table-column prop="name" label="备注" width="60"> </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="this.tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "征地人员统计",
      state: "", // 状态
      value: "", // 起止时间
      tableData: [],
      currentPage3: 1,
      expapply: false,
    };
  },
  methods: {
    onSubmit() {
      if (this.value == "") {
        console.log("submit!!!");
      } else {
        const timestart =
          this.value[0].getFullYear() +
          "-" +
          (this.value[0].getMonth() + 1) +
          "-" +
          this.value[0].getDate();
        const timeend =
          this.value[1].getFullYear() +
          "-" +
          (this.value[1].getMonth() + 1) +
          "-" +
          this.value[1].getDate();
        console.log(timestart); // 开始时间
        console.log(timeend); // 结束时间
      }
      this.expapply = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    /* 导出文档 */
    exportClick() {
      this.export2Excel();
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");

        const tHeader = [
          "状态",
          "姓名",
          "性别",
          "出生日期",
          "身份证号",
          "社保卡号",
          "开户行名称",
          "银行账号",
          "户主",
          "与户主关系",
          "家庭住址",
          "联系电话",
          "征地前土地面积（亩）",
          "原有社保类型",
          "社保缴费状态",
          "享受困难补贴年限",
          "企业缴费年限",
          "征地项目",
          "被征地时年龄（周岁）",
          "基准补贴年限",
          "补贴金额",
          "备注",
        ];

        const filterVal = [
          "number",
          "village",
          "landname",
          "years",
          "batch",
          "massif",
          "approvaldate",
          "interestdate",
          "yearwages",
          "wages",
          "measureland",
          "areaprice",
          "levytaxes",
          "socialsecurity",
          "households",
          "people",
        ];

        const list = [
          {
            number: 1,
            village: "1村",
            landname: "第一项目",
            years: "2020",
            batch: "122",
            massif: "852",
            approvaldate: "2020-01-03",
            interestdate: "2020-02-05",
            yearwages: "2018",
            wages: "564454",
            measureland: "565",
            areaprice: "455",
            levytaxes: "4:5",
            socialsecurity: "541",
            households: "1568",
            people: "4515",
          },
        ];

        const data = this.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "**征地人员统计" + new Date());
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    printText() {
      this.$router.push("/projectinfo/print");
    },
  },
};
</script>

<style scoped lang="scss">
.user {
  padding: 30px;
  .el-pagination {
    max-width: 2231px;
    text-align: right;
  }
}
</style>
